<template >
  <div class="m-detail-info">
    <div class="background-blur">
      <img :src="host + data.logo" />
    </div>
    <div class="container m-playlist-detail-info">
      <div class="thumbnail">
        <a class="thumb-img">
          <img :src="host + data.logo" />
        </a>
      </div>
      <div class="content">
        <h1 class="title">{{ data.title }}</h1>
        <div class="singer-name">
          <i class="iconfont icon-yonghu"></i>
          <a href="javascript:void(0);">{{ data.singername }}</a>
        </div>
        <div class="playcount">
          播放量：
          <span>{{ (data.playcount / 10000).toFixed(1) }}万</span>
        </div>
        <div class="tags">
          标签：
          <template v-for="(item, index) of data.tags" :key="index">
            <a
              href="javascript:void(0);"
              target="_blank"
              :data-pid="item.pid"
              >{{ item }}</a
            >
          </template>
        </div>
        <div class="intro-wrapper">
          <div class="intro" v-MoreClick>
            <div class="intro-span">简介：{{ data.intro }}</div>
            <a href="JavaScript:void(0);">更多</a>
            <div class="intro-more scrollbar" v-html="data.intro"></div>
          </div>
        </div>
        <div class="actions">
          <DetailButton :active="true" @click="allPlay">
            <i class="iconfont icon-bofangsanjiaoxing"></i>
            全部播放
          </DetailButton>
          <DetailButton>
            <i class="iconfont icon-aixin"></i>
            收藏
          </DetailButton>
          <DetailButton>
            <i class="iconfont icon-tianjiadao"></i>
            添加到
          </DetailButton>
          <DetailButton>... 更多</DetailButton>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import DetailButton from "./Plugin/button";
import MoreClick from "./directives/moreClick.js";
import utils from "@/libs/utils";
import { host } from "@/configs/config";
export default {
  name: "DetailInfo",
  props: {
    data: Object,
  },
  directives: {
    MoreClick,
  },
  components: {
    DetailButton,
  },
  setup(props) {
    const state = reactive({
      imgParam: "?param=400y400",
    });

    const allPlay = () => {
      let data = props.data.songlist.songlist;
      let arr = [];
      data.map((item, index) => {
        if (item.is_lock != "-1") arr.push(item);
      });
      let isTo = utils.getLocalStorage("isToPlayer");
      if (isTo) {
        utils.setLocalStorage(
          "y_playlist",
          JSON.stringify({
            songlist: arr,
            length: arr.length,
          })
        );
      } else {
        utils.setLocalStorage(
          "y_playlist",
          JSON.stringify({
            songlist: data,
            length: data.length,
          })
        );
        utils.setLocalStorage("isToPlayer", "");
        window.open("/player");
      }
    };
    return {
      ...toRefs(state),
      allPlay,
      host,
    };
  },
};
</script>

<style lang='scss' scoped>
.m-detail-info {
  position: relative;
  z-index: 1;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  }
  .background-blur {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    opacity: 0.3;
    img {
      width: 100%;
      position: absolute;
      top: -50%;
      filter: blur(2rem);
    }
  }
  .m-playlist-detail-info {
    position: relative;
    padding: 3.1% 0;
    .thumbnail {
      float: left;
      position: relative;
      overflow: hidden;
      width: 22%;
      &::after {
        content: "";
        display: block;
        padding-top: 100%;
        background-size: contain;
      }
      a {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        &::after {
          content: "";
          display: block;
          padding-top: 100%;
          background-size: contain;
        }
        img {
          width: 100%;
          -ms-transform: scale(1);
          transform: scale(1);
          transition: all 0.3s;
        }
      }
    }
  }
  .content {
    margin-left: 26.5%;
    padding: 1.2% 0;

    .title {
      margin-bottom: 0.8em;
      line-height: 1.2;
      font-size: 28px;
      font-weight: 700;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .singer-name {
      margin-bottom: 2em;
      i {
        vertical-align: middle;
        margin-right: 4px;
      }
    }
    .playcount {
      margin-bottom: 0.5em;
    }
    .tags {
      margin-bottom: 0.5em;
      a {
        margin-right: 0.5em;
        font-style: normal;
        &:hover {
          color: $ThemeColor;
        }
      }
    }
    .intro-wrapper {
      position: relative;
      margin-right: 4.5em;
      .intro {
        position: relative;
        margin-right: 4.5em;
        margin-bottom: 1.3em;
        span {
          float: left;
        }
        .intro-span {
          float: left;
          max-width: 550px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #333;
        }
        a {
          color: $ThemeColor;
          margin-left: 5px;
        }
        .intro-more {
          display: none;
          top: 30px;
          z-index: 1;
          position: absolute;
          padding: 1.2em 1.5em;
          color: #666;
          font-size: 12px;
          line-height: 1.8;
          white-space: pre-line;
          max-height: 26em;
          overflow: auto;
          background-color: #fff;
          box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
        }
      }
    }
    .actions {
    }
  }
}
</style>
